<template>
  <div class="full-width">
    <div class="border_top mrt20 mrb15" v-show="showBorderTop"></div>
    <div class="flex flex-wrap">
      <div
        class="border-bottom-style flex full-width"
        v-for="(item, index) in marksData"
        :key="index"
      >
        <div
          class="flex flexcc flex48 remark-item"
          style="width: 50%"
          :class="listIndex % 2 == 0 ? 'border-right-bottom' : ''"
          v-for="(list, listIndex) in item.list"
          :key="listIndex"
        >
          <div class="remark_box flex1">
            <img :src="img" />
          </div>
          <div class="right_box flex1 flexcc flex-column">
            <div class="flex num white main-size20 align-end mrb6">
              {{ list.value }}
              <span class="size12 white">{{ list.unit }}</span>
            </div>
            <div class="tit white size16 text-normal">{{ list.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    marksData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showBorderTop: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      img: require("@/assets/images/gongJian/icon_quantity.png"),
    };
  },

  created() {
    // this.jobEvaluate.forEach();
  },
  mounted() {},
  computed: {},

  methods: {},
};
</script>
<style lang="scss" scoped>
.border-bottom-style {
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, #2b3440, #4078f5 50%, #2b3440) 2;
}
.border-right-bottom {
  border-right: 1px solid;
  border-image: linear-gradient(to bottom, #2b3440, #4078f5) 1;
}
.border-top-bottom {
  border-right: 1px solid;
  border-image: linear-gradient(to top, #2b3440, #4078f5) 1;
}
.border_top {
  border: 1px solid #617bac;
}
.remark_box {
  width: 70px;
  height: 52px;
  img {
    width: 100%;
    height: 100%;
  }
}

.remark-item {
  padding: 12px;
}
.num {
  color: #bbd7fb;
}
</style>
